<template>
  <view class="container pageBg">
    <!-- 搜索框 -->
    <view class="search-box " >
      <uni-search-bar 
        placeholder="输入关键词搜索问题" 
        @confirm="handleSearch"
      />
    </view>

    <!-- 常见问题分类 -->
    <view class="section ">
      <view class="section-title">常见问题解答</view>
      <view class="faq-list">
        <uni-collapse accordion>
          <uni-collapse-item 
            v-for="(item, index) in filteredFaq" 
            :key="index"
            :title="item.question"
            :show-animation="true"
          >
            <view class="answer-content">
              <text>{{ item.answer }}</text>
              <view v-if="item.tips" class="answer-tips">
                <uni-icons type="info" size="16" color="#ff9900" />
                <text>{{ item.tips }}</text>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </view>
    </view>

    <!-- 注意事项 -->
    <view class="section">
      <view class="section-title">使用注意事项</view>
      <view class="notice-list">
        <view 
          v-for="(item, index) in noticeList" 
          :key="index"
          class="notice-item"
        >
          <uni-icons type="alert" color="#ff4444" size="18" />
          <text class="notice-text">{{ item }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 常见问题数据
const faqList = ref([
  {
    question: "如何更新应用版本？",
    answer: "1. 打开应用商店 → 搜索本应用 → 点击更新\n2. 或在应用内[设置]-[关于我们]中检查更新",
    tips: "建议在WiFi环境下进行更新"
  },
  {
    question: "账号无法登录怎么办？",
    answer: "1. 检查网络连接\n2. 确认账号密码正确\n3. 尝试重置密码\n4. 联系客服处理",
    tips: "连续输错密码会导致账号锁定"
  },
  {
    question: "数据同步失败如何处理？",
    answer: "1. 检查网络状态\n2. 确保存储权限已开启\n3. 重启应用重试\n4. 清除缓存重新登录"
  }
])

// 注意事项数据
const noticeList = ref([
  "请勿在设备电量低于10%时进行重要操作",
  "定期备份重要数据，防止意外丢失",
  "禁止修改应用核心文件，可能导致功能异常",
  "遇到异常情况请及时联系客服",
  "未成年人使用时建议家长陪同"
])

// 搜索功能
const searchText = ref('')
const filteredFaq = computed(() => {
  if (!searchText.value) return faqList.value
  return faqList.value.filter(item => 
    item.question.includes(searchText.value) || 
    item.answer.includes(searchText.value)
  )
})

const handleSearch = (e) => {
  searchText.value = e.value
}
</script>

<style scoped>
.container {
  padding: 20rpx 30rpx;
  background-color: #f5f5f5;
}

.section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 30rpx;
  position: relative;
  padding-left: 20rpx;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 32rpx;
  background-color: #007AFF;
  border-radius: 4rpx;
}

.faq-list {
  border-radius: 12rpx;
  overflow: hidden;
}

.answer-content {
  padding: 20rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.answer-tips {
  margin-top: 20rpx;
  padding: 15rpx;
  background: #fff9e6;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  color: #ff9900;
}

.notice-list {
  padding: 20rpx;
}

.notice-item {
  display: flex;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #eee;
}

.notice-text {
  margin-left: 15rpx;
  font-size: 28rpx;
  color: #666;
}

/* 修改组件默认样式 */
:deep(.uni-collapse-item__title) {
  font-size: 30rpx !important;
  color: #333 !important;
}

:deep(.uni-collapse-item__content) {
  background-color: #fafafa !important;
}
</style>